<template>
  <div class="login-common">
    <div class="replay-header" @click="backTo()">
      <div class="return-head-left">
        <img class="return-back" src="../../static/images/qi.png" alt="">
      </div>
      <div class="return-right">
        <span class="return-back-text">{{showTitle}}登陆</span>
      </div>
    </div>
    <div class="login-common-content">
      <div class="login-common-content-one">
        <div class="login-common-content-one-image">
          <img class="login-common-content-one-image-style" src="../../static/images/user.png" alt="">
        </div>
        <div class="login-common-content-one-input">
          <input placeholder="请输入手机号" v-model="mod_phone" class="login-common-content-one-input-style" type="text">
        </div>
      </div>
      <div class="login-common-content-one">
        <div class="login-common-content-one-image">
          <img class="login-common-content-one-image-style" src="../../static/images/password.png" alt="">
        </div>
        <div class="login-common-content-one-input">
          <input placeholder="请输入密码" v-model="mod_password"  class="login-common-content-one-input-style"
                 type="password">
        </div>
      </div>
    </div>
    <div class="login-common-footer">
      <div class="login-common-footer-ke" @click="register()">
        <a  class="login-common-footer-ke-text">注册</a>
      </div>
      <div class="login-common-footer-bottom" @click="loginIn()">
        <div class="login-common-footer-bottom-style">
          <span class="login-common-footer-bottom-text">登录</span>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
  import Vue from 'vue';
  import {Toast, Notify} from 'vant';
  import {isphoneNumber,isEmpty,toast,checkPassword} from "../tools";
  Vue.use(Toast).use(Notify);

  export default {
    name: "login",
    data() {
      return {
        showTitle:'',
        carOwner:'',
        mod_phone:'',
        mod_password:''
      }
    },
    mounted() {
      this.carOwner = this.$route.query.id;
      // console.log(this.isCarId)
      if(this.$route.query.id === 0){
        this.showTitle = "乘客"
      }else{
        this.showTitle = "车主"
      }
    },
    methods: {
      backTo(){
        this.$router.push("/");
      },
      register(){
        this.$router.push({
          name:"register",
          query:{
            id:this.carOwner
          }
        });
      },
      // http登录接口
      loginIn: function () {
        if (!isphoneNumber(this.mod_phone)) {
          Toast('请输入合法手机号');
          return;
        }
        if (!checkPassword(this.mod_password)) {
          Toast('请输入6位数字密码');
          return;
        }
        let that = this;
        this.$httpPostService('/login', {
          phone: that.mod_phone,
          password: that.mod_password,
          carOwner: that.carOwner
        }).then(res => {
          console.log("carOwner   -----   "+res);
          if(res.error_code === 0){
            this.$router.push({
              name:"index",
              query:{
                status:1,
                id:res.data.carOwner,
                phone:res.data.phone
              }
            });
          }else if(res.error_code === 1){
            toast("密码错误")
          }else if(res.error_code === 2){
            toast("账号不存在")
          }

        }).catch(err => {
          console.log(err)
        })
      }
    }
  }
</script>
<style scoped lang="less" src="../assets/less/login.less"></style>
